<template>
  <div>
    <el-card>
      <el-row :gutter="12">
        <el-col :span="6">
          <el-input placeholder="请输入电影名称" class="input-with-select" v-model="queryInfo.name" clearable @clear="getMovieList">
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-select v-model="queryInfo.isRelated" clearable placeholder="请选择">
            <el-option
                v-for="item in hsOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="10">
          <el-button type="primary"  @click="getMovieList">搜索</el-button>
          <el-button type="warning"  @click="synchMovie">同步南里电影</el-button>
          <el-button type="warning"  @click="synchCinema">同步南里影院</el-button>
        </el-col>
      </el-row>
      <el-table :data="movieList" border stripe>
        <el-table-column label="id" prop="id"></el-table-column>
        <el-table-column label="电影名称" prop="name"></el-table-column>
        <el-table-column label="导演" prop="director"></el-table-column>
        <el-table-column label="演员" height="180" prop="cast"></el-table-column>
        <el-table-column label="首映日期" prop="publishDate"></el-table-column>
        <el-table-column label="已关联电影id" prop="relatedId"></el-table-column>
        <el-table-column label="已关联电影名称" prop="relatedName">
          <template slot-scope="sc">
            <el-link type="primary" v-if="sc.row.relatedName!=null">{{sc.row.relatedName}}</el-link>
            <br/><br/>
            <el-button type="warning" plain size="mini" @click="toMovieMath(sc.row.id)">修改关联</el-button>
          </template>
        </el-table-column>
        <!-- 分页 -->
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pageNo"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      >
      </el-pagination>
    </el-card>
    <moviematch ref="moviematch"></moviematch>
  </div>
</template>

<script>import Api from '@/api/Movie.js'
import MovieMatch from './MovieMatch.vue'
export default {
  components: {
    'moviematch': MovieMatch
  },
  data() {
    return {
      queryInfo: {
        name: '',
        isRelated: null,
        pageNo: 1, // 页码
        pageSize: 10, // 页大小
      },
      hsOptions: [{
        value: true,
        label: '已匹配'
      },{
        value: false,
        label: '未匹配'
      }],
      movieList: [],
      total: 0
    }
  },
  created() {
    this.getMovieList()
  },
  methods: {
    getMovieList() {
      Api.getMovieChannelList(this.queryInfo).then(res => {
        if (res.success) {
          this.movieList = res.data.records
          this.total = res.data.total
        } else {
          return this.$message.error('获取电影列表失败')
        }
      })
    },
    synchMovie() {
      Api.movieChannelSynch({'channel':'n'}).then(res => {
        if (res.success) {
          return this.$message.success('同步中')
        } else {
          return this.$message.error('获取电影列表失败')
        }
      })
    },
    synchCinema() {
      Api.cinemaChannelSynch({'channel':'n'}).then(res => {
        if (res.success) {
          return this.$message.success('同步中')
        } else {
          return this.$message.error('获取电影列表失败')
        }
      })
    },
    handleSizeChange(pageSize) {
      this.queryInfo.pageNo = 1
      this.queryInfo.pageSize = pageSize
      this.getMovieList()
    },
    // 监听pageNo的事件
    handleCurrentChange(pageNo) {
      this.queryInfo.pageNo = pageNo
      this.getMovieList()
    },
    toMovieMath(id) {
      this.$refs.moviematch.showMatchDialog(id)
    }
  }
}
</script>

<style>

</style>
